<template>
  <div class="e-wrap">
    <!-- 搜索条件 -->
    <div class="e-filter-options">
      <div class="e-item">
        <span class="title">字典编码</span>
        <div class="dis-block">
          <w-input :holder="`请填写`" v-model="queryParams.dictCode"></w-input>
        </div>
      </div>
      <div class="e-item">
        <span class="title">上级字典</span>
        <div class="dis-block">
          <w-select :options='parentDictList' v-model="queryParams.parentId"></w-select>
        </div>
      </div>
      <!-- 搜索按钮 -->
      <div class="filter-btn">
          <w-button @on-click='changePage(1)'>搜索</w-button>
      </div>
    </div>
    <!-- 字典列表 -->
    <div class="e-filter-list">
      <div class="e-add clearfix">
          <w-button @on-click="updateDict">新增字典</w-button>
          <span>共计：{{dictionaryList.totalCount}}条</span>
      </div>
      <w-table :columns="columns"></w-table>
      
      <!-- 列表数据 -->
      <div class="clearfix" v-if="dictionaryList.totalCount">
        <div class="add-classify" v-for="(val, index) in dictionaryList.recordList" :key='index'>
          <!-- 一级字典 -->
          <div class="classify-one clearfix menu">
            <div class="clssify fl">
              <span class="icon-classify" :class="{'icon-more': val.isShow, 'icon-little': !val.isShow}" @click="val.isShow = !val.isShow"></span>
              <span style="font-size: 14px;">{{val.dictName}}</span>
              <button class="add"  @click="updateDict('', val.id)">+新增下级字典</button>
            </div>
            <div class="options">
              <!-- <span class="icon-text" @click="updateDict(val)">编辑 | </span>
              <span class="icon-text" @click="delPanel = true; delParams.ids = [val.id]">删除 |</span> -->
              <span class="icon-text" @click="updateDict(val, '', 'see')">查看</span>
            </div>
          </div>

          <!-- 二级字典 -->
          <div v-if="val.sonDict && val.sonDict.length > 0 && val.isShow">
            <div class="classify-one classify-two clearfix" v-for="(v, i) in val.sonDict" :key='i'>
              <div class="menu">
                <div class="clssify fl">
                  <!-- <span class="icon-classify icon-more"></span> -->
                  <span>{{v.dictName}}</span>
                </div>
                <div class="options">
                  <span class="icon-text" @click="updateDict(v, val.id)">编辑 | </span>
                  <span class="icon-text" @click="delPanel = true; delParams.ids = [v.id]">删除 |</span>
                  <span class="icon-text" @click="updateDict(v, val.dictName, 'see')">查看</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <div class="fr" style="margin-top: 55px">
          <w-paging :current="dictionaryList.currentPage" :total="dictionaryList.pageCount" @on-page='changePage'></w-paging>
        </div>
      </div>

      <!-- 没有数据时 -->
      <div v-else style="text-align: center;line-height: 50px;">暂无数据</div>
    </div>

    <!-- 新增/编辑字典弹框 -->
    <w-panel-validate v-model="addPanel" :panel-title="true" title="新增字典" :width="`650px`" :height="`475px`" @on-confirm='addOrUpadte'>
      <div class="depart-panel">
        <div class="e-item" v-if="addParams.parentId">
          <span class="title">上级字典</span>
          <div class="dis-block">
            <w-select :defaultSe='false' :options='parentDictList' v-model="addParams.parentId"></w-select>
          </div>
          <em>若需要添加上级字典，则不需要选择上级</em>
        </div>
        <div class="e-item">
          <span class="title">字典编号</span>
          <div class="dis-block">
            <w-input :holder="`请填写`" v-model="addParams.dictCode" rule="isEmpty" error="*此项必填"></w-input>
          </div>
          <em>编号格式为名称首字母</em>
        </div>
        <div class="e-item">
          <span class="title">字典名称</span>
          <div class="dis-block">
            <w-input :holder="`请填写`" v-model="addParams.dictName" rule="isEmpty" error="*此项必填"></w-input>
          </div>
        </div>
        <div class="e-item">
          <span class="title">字典类型</span>
          <div class="dis-block">
            <w-input :holder="`请填写`" v-model="addParams.dictType"></w-input>
          </div>
          <em>字典类型：Pc/Mobile</em>
        </div>
        <div class="e-item">
          <span class="title" style="margin-top:10px;">字典描述</span>
          <div class="dis-block" style="vertical-align:top;">
              <w-input :type='`textarea`' :holder="`请填写`" v-model='addParams.dictDesc'></w-input>
          </div>
        </div>
      </div>
    </w-panel-validate>

     <!-- 查看字典弹框 -->
    <w-panel-fixed-wrap v-model="seePanel" :panel-title="true" title="查看字典" :width="`450px`" :height="`460px`" :showBtns='false' :showClose='true' >
      <div class="depart-panel">
        <div class="e-item" v-if="addParams.parentId">
          <span class="title">上级字典</span>
          <div class="dis-block">
            <w-input v-model="addParams.parentId" :disabled='true'></w-input>
          </div>
        </div>
        <div class="e-item">
          <span class="title">字典编号</span>
          <div class="dis-block">
            <w-input v-model="addParams.dictCode" :disabled='true'></w-input>
          </div>
        </div>
        <div class="e-item">
          <span class="title">字典名称</span>
          <div class="dis-block">
            <w-input v-model="addParams.dictName" :disabled='true'></w-input>
          </div>
        </div>
        <div class="e-item">
          <span class="title">字典类型</span>
          <div class="dis-block">
            <w-input v-model="addParams.dictType" :disabled='true'></w-input>
          </div>
        </div>
        <div class="e-item">
          <span class="title" style="margin-top:10px;">字典描述</span>
          <div class="dis-block" style="vertical-align:top;">
              <w-input :type='`textarea`'  v-model='addParams.dictDesc' :disabled='true'></w-input>
          </div>
        </div>
      </div>
    </w-panel-fixed-wrap>

    <!-- 删除字典 -->
    <w-panel-fixed-wrap v-model="delPanel"  :panel-title="true" title="删除字典" :width="`260px`" :height="`200px`" @on-confirm='delOption'>
      <div class="panel-classify">
        是否确认删除该字典
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { apiSystemMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      columns: [
        {title: '字典名称', width: '70%'},
        {title: '操作', width: '30%'}
      ],
      addPanel: false,
      seePanel: false,
      delPanel: false,
      // 查询字典 -- 参数
      queryParams: {
        accessToken: '',
        currentPage: '1',
        showCount: '5',
        dictCode: '',
        parentId: ''
      },
      dictionaryList: [], // 所有字典列表
      parentDictList: [], // 所有上级字典列表
      // 新增字典 -- 参数
      addParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: '',
        parentId: '',
        dictName: '',
        dictType: '',
        dictDesc: '',
        dictCode: '',
        type: ''
      },
      // 删除字典 -- 参数
      delParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        ids: []
      }
    }
  },
  created() {
    this._getDictionaryList()
    this._getParentDictList()
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    // 查询所有字典列表
    _getDictionaryList() {
      this.queryParams.accessToken = this.token
      apiSystemMange.queryDictionary(this.queryParams).then(data => {
        if (data.code != '200') return
        this.dictionaryList = data.data
        if (this.dictionaryList.totalCount) {
          this.dictionaryList.recordList.forEach(item => {
            this.$set(item, 'isShow', true)
          })
        }
      })
    },
    // 查询上级字典
    _getParentDictList() {
      apiSystemMange.queryParentDict().then(data => {
        if (data.code != '200') return
        this.parentDictList = data.data.list.map(item => {
          return {
            value: item.id,
            label: item.dictName
          }
        })
      })
    },
    changePage(page) {
      this.queryParams.currentPage = page
      this._getDictionaryList()
    },
    // 编辑字典
    updateDict(data, id, type) {
      if (type == 'see') {
        this.seePanel = true
      } else {
        this.addPanel = true
      }
      this.addParams.type = ''
      if (!data) {
        this.addParams.type = 'one'
        if (id) {
          this.addParams.type = 'two'
        }
      }
      this.addParams.parentId = id || ''
      this.addParams.id = data ? data.id : ''
      this.addParams.dictName = data ? data.dictName || '' : ''
      this.addParams.dictType = data ? data.dictType || '' : ''
      this.addParams.dictDesc = data ? data.dictDesc || '' : ''
      this.addParams.dictCode = data ? data.dictCode || '' : ''
    },
    addOrUpadte() {
      this.addParams.accessToken = this.token
      apiSystemMange.addDict(this.addParams).then(data => {
        if (data.code != '200') return
        let toastStr = ''
        if (this.addParams.id) {
          toastStr = '字典修改成功'
        } else {
          toastStr = '字典新增成功'
        }
        this.$toast(toastStr, () => {
          this.addPanel = false
          this._getDictionaryList()
          if (!this.addParams.id) {
            this._getParentDictList()
          }
        })
      })
    },
    // 删除字典
    delOption() {
      this.delParams.accessToken = this.token
      apiSystemMange.delDict(this.delParams).then(data => {
        if (data.code != '200') return
        this.$toast('字典删除成功', () => {
          this.delPanel = false
          this.changePage(1)
        })
      })
    }
  }
}
</script>

<style lang="scss">
.w-input .error-tip {
  font-size: 12px;
}
</style>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.dis-block {
  width: 260px;
  vertical-align: middle;
}
.e-filter-options {
  border-bottom: 1px solid $border-gray-light;
  .e-item {
    &:nth-of-type(1) {
      margin-left: 0;
    }
    .title {
      width: 74px;
      text-align: left;
      margin-right: 0;
    }
  }
  .filter-btn {
    margin: 40px auto 20px;
    text-align: center;
  }
}
.e-filter-list {
  width: 100%;
  .e-add {
    margin: 20px 0;
    span {
      float: right;
      color: rgba(49, 49, 49, 1);
      line-height: 20px;
    }
  }
}
.depart-panel {
  .e-item {
    display: block;
    margin-bottom: 20px;
    margin-left: 40px !important;
    em {
      color: $color-main;
      font-size: 11px;
      margin-left: 16px;
    }
    textarea {
      height: 90px;
      padding: 5px;
    }
  }
}
.menu {
  height: 46px;
  line-height: 46px;
  &.three {
    border-top:  1px solid $border-gray-light;
  }
}
.add-classify {
  width: 100%;
  font-size: 12px;
  border: 1px solid $border-gray-light;
  border-top: none;
  .classify-one {
    padding-left: 5%;
  }
  .classify-two {
    border-top: 0;
    border-top:  1px solid $border-gray-light;
    padding-left: 8%;
  }
}
.add {
  border: 1px solid #DBDBDB;
  height: 22px;
  border-radius: 2px;
  font-size: 12px;
  margin-left: 10px;
  padding: 0 10px;
}
.icon-classify {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 12px;
  vertical-align: sub;
  cursor: pointer;
  &.icon-more {
    background: url(../../assets/classify-more-big.png) no-repeat;
  }
  &.icon-little {
    background: url(../../assets/classify-big.png) no-repeat;
  }
}
.clssify {
  width: 70%;
  display: inline-block;
}
.options {
  width: 30%;
  display: inline-block;
  text-align: center;
  .icon-text {
    color: $color-main;
    cursor: pointer;
  }
}
</style>